// 定义一个全局变量用于存储当前的依赖
let activeEffect = null;

// 模拟 effect 函数，用于在读取数据时注册依赖
function effect(fn) {
  // 设置当前激活的依赖
  activeEffect = fn;
  // 执行一次依赖函数，触发数据的 `get` 操作来收集依赖
  fn();
  // 依赖收集完毕，重置 activeEffect
  activeEffect = null;
}

// 定义一个存储依赖的 Map
const targetMap = new WeakMap();

function track(target, key) {
  if (activeEffect) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      targetMap.set(target, (depsMap = new Map()));
    }
    let dep = depsMap.get(key);
    if (!dep) {
      depsMap.set(key, (dep = new Set()));
    }
    dep.add(activeEffect);
  }
}

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  const dep = depsMap.get(key);
  if (dep) {
    dep.forEach(effect => effect());
  }
}

// 使用 Proxy 实现数据响应式
function reactive(obj) {
  let handler = {
    // target 是被代理的对象
    // key 是要读取的属性
    // receiver 是代理对象本身
    get(target, key, receiver) {
      // 触发依赖收集
      track(target, key);
      return Reflect.get(target, key, receiver);
    },
    // target 是被代理的对象
    // key 是要设置的属性
    // value 是新的值
    // receiver 是代理对象本身
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      // 触发更新
      trigger(target, key);
      return result;
    }
  }
  return new Proxy(obj, handler);
}

// 使用响应式对象
const state = reactive({ count: 0 });

// 定义一个副作用函数，每次 `state.count` 改变时都会重新执行
effect(() => {
  console.log(`Count is: ${state.count}`);
});

// 触发数据修改，自动更新
state.count++;  // 输出: Count is: 1
state.count++;  // 输出: Count is: 2
